<template>
  <div>
    <Spin :spinning="isLoading">
      <Menu
      v-model:selectedKeys="selectedKeys"
      @click="handleClick"
      :inlineIndent="10"
      theme="light"
      mode="inline" class="SiderClass" 
      :style="{ height: MenuHeight + 'px' }"
    >
      
      <Menu.Item v-if="groupItem.length === 0" key="empty" disabled>
        <div class="text-center text-gray-400">{{$t('Index.Nodata')}}</div>
      </Menu.Item>
      <Menu.Item v-else v-for="item in groupItem" :key="item.id">
        <Tooltip class="flex justify-content items-center">
          <template #title>{{item.flow_group_desc?item.flow_group_desc:item.flow_group_name}}</template>
            <ContactsTwoTone/>
          <!--whitespace-normal-->
          <span class="nav-text  overflow-hidden text-ellipsis">{{item.flow_group_name}}</span>
          <a-badge class="ml-auto" :count="item.group_count" :overflow-count="999999" :number-style="{
            backgroundColor: '#fff',
            color: '#999',
            boxShadow: '0 0 0 1px #d9d9d9 inset',
          }"/>
        </Tooltip>
      </Menu.Item>
    </Menu>
    </Spin>
    
  </div>
</template>
<script setup>
import { reactive, ref, watch, h,onMounted ,computed} from 'vue';
import { Menu,Spin,Tooltip,message } from 'ant-design-vue';
import * as http from '@/api/flow/index.js';
import { useResizeTableHeight } from '@/hooks/usetableHeight.js';
import emiter from '@/plugins/bus.js';
import { useRowSelectStore } from "@/store/modules/rowSelectStore";
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UsergroupAddOutlined,
  ContactsTwoTone,
  CaretRightOutlined
} from '@ant-design/icons-vue';
const rowSelectStore = useRowSelectStore();
watch(() => rowSelectStore.Gid,() => refreshFlowGroup());
const {MenuHeight} = useResizeTableHeight()
const selectedKeys = ref(['1']);
const collapsed = ref(false);

const groupItem = ref([{
  id:"0",flow_group_name:"",flow_group_desc:""
}])
const userId = sessionStorage.getItem('userId');
const isLoading = ref(false);
onMounted(() => refreshFlowGroup());
const refreshFlowGroup = (searchText = undefined) => {
  isLoading.value = true;
  const params = {
    "userId":userId,
    "flow_group_name":searchText?.value ? searchText.value : searchText,
    "userGroupId":rowSelectStore.Gid
  }
  http.getAllRelFlowGroupInfo(params).then(res => {
    isLoading.value = false;
    const { code, data, msg, traceId } = res;
    if (code === "000000") {
      console.log(data, 'data');
      if (!data) {
        message.warning(msg);
        groupItem.value = [];
      } else if (data.length) {
        groupItem.value = data;
      }
      else {
        message.warning(msg);
        groupItem.value = [];
      }
    } else {
      message.warning(msg);
    }
  })
}
emiter.on('refreshFlowGroup', (searchText) => {
  refreshFlowGroup(searchText)
});
//解绑emit
import { onUnmounted} from 'vue';
onUnmounted(() => {
    emiter.off('refreshFlowGroup');
});

const searchData = reactive({
  flowGroupId: undefined,
});
const handleClick = ({key,domEvent}) => {
  searchData.flowGroupId = key;
  emiter.emit('refreshFun', searchData);
}
</script>

<style  >
.menu-left-align {
  text-align: left;
  float: left;
}

.menu-left-align .ant-menu-item,
.menu-left-align .ant-menu-submenu-title {
  float: none;
}

.menu-left-align .ant-menu-item-group-title {
  text-align: left;
}

.menu-left-align .ant-menu-item > a,
.menu-left-align .ant-menu-submenu-title > a {
  float: none;
}

.menu-left-align .ant-menu-horizontal > .ant-menu-item {
  display: inline-block;
  float: none;
}

.menu-left-align .ant-menu-submenu {
  float: none;
}
.SiderClass {
text-align: left;overflow:auto;

}
/* .SiderClass::-webkit-scrollbar-thumb {1
  background-image: linear-gradient(180deg, #4d7fff 0%, #708AD4 99%);
    box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
    border-radius: 100px;
}

.SiderClass::-webkit-scrollbar-track {
  border-radius: 0;
    background: rgba(0,0,0,0.1);
}

.SiderClass::-webkit-scrollbar-button {
  background-color: #4d7fff;
  border-radius: 5px;
}

.SiderClass::-webkit-scrollbar-button:hover {
  background-color: #999999;
} */
/* .SiderClass::-webkit-scrollbar {
    display: none; 
}
.SiderClass:hover::-webkit-scrollbar {
    display: block;
} */
.SiderClass .ant-menu-item:first-child {
  position: sticky;
  top: 0;
  background-color: white; /* 设置背景色以实现视觉上的固定效果 */
  z-index: 1000; /* 确保它显示在其他元素之上 */
  font-weight: bold;
}
</style>
